<template>
  <div>
    <!-- 查询栏 -->
    <div>
      <el-input
        placeholder="请输入ip"
        v-model="input.ip"
        prefix-icon="el-icon-search"
        style="width: 300px; margin-left: -200px"
      >
      </el-input>
      <!-- 查询条件 -->
      <el-select
        v-model="input.state"
        placeholder="状态"
        style="margin-left: 10px; width: 100px"
      >
        <el-option label="全部" value=""></el-option>
        <el-option label="处理中" value="处理中"></el-option>
        <el-option label="已处理" value="已处理"></el-option>
      </el-select>
      <!-- 查找按钮 -->
      <el-button type="info" plain @click="find" style="margin-left: 10px"
        >查找</el-button
      >
    </div>
    <div style="height: 10px"></div>
    <!-- 显示表格 -->
    <template>
      <div class="table_all">
        <el-card shadow="hover" class="tebale_card">
          <el-table
            height="510px"
            :data="tableData"
            :row-style="getRowClass"
            :header-row-style="getRowClass"
            :header-cell-style="getRowClass"
          >
            <el-table-column prop="ip" label="IP"> </el-table-column>
            <el-table-column prop="port" label="端口"> </el-table-column>
            <el-table-column prop="content" label="描述"> </el-table-column>
            <el-table-column prop="type" label="类型"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="state" label="状态"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button type="primary" @click="detail(scope.row)"
                    >处理</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </template>
    <!-- 分页栏 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="input.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="input.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="
        position: fixed;
        bottom: 10px;
        width: 90%;
        text-align: center;
        margin-left: -160px;
      "
      :total="total"
    >
    </el-pagination>
    <!-- 处理弹框 -->
    <el-dialog title="漏洞处理" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form1">
        <el-form-item label="处理内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form1.solveCont"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requesturl: "/safesys/api/loophole/",
      total: 0,
      formLabelWidth: "70px",
      dialogFormVisible: false,
      input: { pageNum: 1, pageSize: 5, ip: "", state: "", userName: "" },
      tableData: [],
      form1: {},
      interfaces: [
        "detail",
        "add",
        "del",
        "update",
        "search",
        "selectips",
        "issue",
      ],
    };
  },
  methods: {
    // 修改页数
    handleCurrentChange: function (currentPage) {
      this.input.pageNum = currentPage;
      this.CURD(this.interfaces[5], this.input, 1);
    },
    // 修改页面显示数量
    handleSizeChange: function (pagesize) {
      this.input.pageSize = pagesize;
      this.CURD(this.interfaces[5], this.input, 1);
    },
    // 修改表格背景色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#ffffff00;";
    },
    // 查询方法
    find() {
      this.CURD(this.interfaces[5], this.input, 2);
    },
    // 编辑方法
    edit() {
      this.form1.state = "已处理";
      this.form1.userName = this.$route.query.userName;
      this.CURD(this.interfaces[3], this.form1, 4);
      this.CURD(this.interfaces[6], this.form1, 3);
    },
    // 查询详情
    detail(row) {
      this.CURD(this.interfaces[0], { id: row.id }, 5);
      this.dialogFormVisible = true;
    },
    // 整合增删改查,用于axios请求数据
    CURD(url, operate, mod) {
      if (mod == 1) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          this.tableData = res.data.data.list;
        });
      } else if (mod == 2 || mod == 3 || mod == 4) {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          if (res.data.code == 1) {
            if (mod == 2) {
              this.total = res.data.data.total;
              this.tableData = res.data.data.list;
            }
            if (mod != 4) {
              this.$message({
                duration: 500,
                message: "操作完成！",
              });
            }
            if (mod == 3) {
              setTimeout(() => {
                window.location.reload();
              }, 500);
            }
          } else {
            this.$message({
              duration: 500,
              message: "操作失败！\t" + res.data.msg,
            });
          }
        });
      } else {
        this.$axios.post(this.requesturl + url, operate).then((res) => {
          this.form1 = res.data.data;
        });
      }
    },
  },

  created() {
    // 获取页面初始信息
    this.input.userName = this.$route.query.userName;
    this.$axios
      .post("/safesys/api/loophole/selectips", this.input)
      .then((res) => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
  },
};
</script>

<style scoped>
.tt1 {
  width: 350px !important;
}
</style>
